<template>
  <div class="registerbox">
    <el-card class="gray-card no-border no-margin-top" shadow="never">
      <el-form ref="form" :model="form" class="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件编码：">
              <el-input v-model="form.fileNo" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源科室：">
              <!--              <el-input v-model="form.srcDept"></el-input>-->
              <treeselect :disabled="disabled" v-model="form.srcDept" :options="deptOptions" :show-count="true"
                          placeholder="请选择归属部门"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="文件名称：">
              <el-input v-model="form.fileName" type="textarea" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="文件类型：">
              <!--              <el-input v-model="form.fileType"></el-input>-->
              <el-select v-model="form.fileType" placeholder="请选择文件类型" :disabled="disabled">
                <el-option
                  v-for="item in fileTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属项目：">
              <!--              <el-input v-model="form.projectId"></el-input>-->
              <el-select v-model="form.projectId" placeholder="请选择所属项目" :disabled="disabled">
                <el-option
                  v-for="item in prjectList"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="内容简介：">
              <el-input v-model="form.fileDescribe" type="textarea" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="文件附件：">
          <el-upload
            :disabled="disabled"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input v-model="form.remark" type="textarea" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="details-foot" v-if="!disabled">
      <div class="cell-btn">
        <el-button type="primary" @click.native="onSubmit">立即创建</el-button>
        <el-button @click.native="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {addKnowledge, updateKnowledge} from "@/api/business/knowledge"
import {selectList} from "@/api/business/project"
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "addExam",
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  components: {Treeselect},
  data() {
    return {
      title: '新增',
      imageUrl: '',
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      form: {
        fileNo: '',
        srcDept: 100,
        fileName: '',
        fileType: '',
        projectId: '',
        fileDescribe: '',
        remark: '',
        id: null
      },
      prjectList: [],
      // 文件类型: 0  质控方案 1 操作规范 2环境要求 3 培训材料 4 失控规则判断 5 检测结果规则判断
      fileTypeList: [
        {
          label: '质控方案',
          value: 0
        },
        {
          label: '操作规范',
          value: 1
        },
        {
          label: '环境要求',
          value: 2
        },
        {
          label: '培训材料',
          value: 3
        },
        {
          label: '失控规则判断',
          value: 4
        },
        {
          label: '检测结果规则判断',
          value: 5
        }
      ]
    }
  },
  created() {
    this.getTreeselect();
    this.handleGetProjectList()
  },
  methods: {
    onSubmit() {
      if (this.form.id == null || this.form.id == undefined) {
        addKnowledge(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      } else {
        updateKnowledge(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      }
    },
    handleData(obj) {
      this.form.id = obj.id
      this.form.fileNo = obj.fileNo
      this.form.srcDept = obj.srcDept
      this.form.fileName = obj.fileName
      this.form.fileType = obj.fileType
      this.form.projectId = obj.projectId
      this.form.fileDescribe = obj.fileDescribe
      this.form.remark = obj.remark
    },
    // 获取项目
    handleGetProjectList() {
      selectList().then((res) => {
        if (res) {
          this.prjectList = res
        }
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    handleAvatarSuccess() {

    },
    beforeAvatarUpload() {

    },
    handleClose() {
      this.form.fileNo = ''
      this.form.srcDept = ''
      this.form.fileName = ''
      this.form.fileType = ''
      this.form.projectId = ''
      this.form.fileDescribe = ''
      this.form.remark = ''
      this.form.id = null
      this.$emit('close', false)
    }
  }
}
</script>

<style scoped>

</style>
